<template>
  <div class="admin-home-body">
    <div class="admin-home-item">
      <admin-home-title :todaylog="todaylogin"></admin-home-title>
      <el-row class="admin-center">
        <el-col :span="14">
          <echart-view :weeklist="week" v-if="!weekloading"></echart-view>
        </el-col>
        <el-col :span="10" class="age-comp">
          <age-view></age-view>
        </el-col>
      </el-row>

      <div class="test">
        <el-col :span="7" class="level-item" v-loading="isloading">
          <user-level-view
            :userlist="levelnumlist"
            v-if="!isloading"
          ></user-level-view>
        </el-col>
        <el-col :span="16" class="register-item">
          <register-list></register-list>
        </el-col>
      </div>
    </div>
  </div>
</template>

<script>
import AdminHomeTitle from "components/AdminHomeComp/AdminHomeTitle.vue";
import EchartView from "components/AdminHomeComp/EchartView.vue";
import UserLevelView from "components/AdminHomeComp/EchartComp/UserLevelView.vue";
import RegisterList from "components/AdminHomeComp/RegisterList.vue";
import AgeView from "components/AdminHomeComp/AgeView.vue";
// import EarthView from "../../../components/AdminHomeComp/EchartComp/EarthView.vue";

import { getuserlen, getloginuser } from "network/request.js";
export default {
  components: {
    AdminHomeTitle,
    EchartView,
    UserLevelView,
    RegisterList,
    AgeView,
  },
  data() {
    return {
      alluserlist: [],
      loginuserlist: [],
      normal: 0,
      visiter: 0,
      vip: 0,
      disable: 0,
      isloading: true,
      weekloading: true,
      levelnumlist: {
        normal: 0,
        visiter: 0,
        vip: 0,
        disable: 0,
      },
      week: {
        mon: 0,
        tus: 0,
        thi: 0,
        fou: 0,
        fri: 0,
        sat: 0,
        sun: 0,
      },
      todaylogin: 0,
    };
  },
  created() {
    getuserlen()
      .then(({ data: res }) => {
        // this.alluserlist = res;
        res.forEach((item) => {
          this.alluserlist.push(item);
        });
      })
      .then(() => {
        //计算每种用户权限的用户数量
        for (let i = 0; i < this.alluserlist.length; i++) {
          if (this.alluserlist[i].level == "普通用户") {
            this.normal = this.normal + 1;
          } else if (this.alluserlist[i].level == "游客用户") {
            this.visiter++;
          } else if (this.alluserlist[i].level == "会员用户") {
            this.vip++;
          } else this.disable++;
        }
        this.levelnumlist = {
          normal: this.normal,
          visiter: this.visiter,
          vip: this.vip,
          disable: this.disable,
        };

        //计算日期

        this.isloading = false;
      });
    getloginuser()
      .then(({ data: res }) => {
        res.forEach((item) => {
          if (item.logintime != "") {
            this.loginuserlist.push(item);
          }
        });
      })
      .then(() => {
        let nowdate = new Date();
        nowdate = nowdate.toLocaleDateString();
        this.loginuserlist.forEach((item) => {
          let time = item.logintime.split(" ")[0];
          let dateObject = new Date(time);
          //获取登录的星期数
          let xq = dateObject.getDay();
          //计算每一天的登录人数
          switch (xq) {
            case 1:
              this.week.mon++;
              break;
            case 2:
              this.week.tus++;
              break;
            case 3:
              this.week.thi++;
              break;
            case 4:
              this.week.fou++;
              break;
            case 5:
              this.week.fri++;
              break;
            case 6:
              this.week.sat++;
              break;
            case 0:
              this.week.sun++;
              break;
            default:
              this.week.sun++;
          }
          if (nowdate == time) {
            this.todaylogin++;
          }
        });
        this.weekloading = false;
      });
  },
};
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.admin-home-body {
  width: 100%;
  /* height: 100%; */
}
.admin-home-item {
  width: 96.5%;
  /* background-color: red; */
  margin: 0 auto;
}
.test {
  width: 100%;
  height: 300px;
  /* background-color: #fff; */
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
  /* overflow: hidden; */
}
.level-item {
  /* width: 350px; */
  /* width: 30%; */
  height: 100%;
  background-color: #fff;
  /* margin-right: 10px; */
}
.admin-center {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
/deep/ .age-comp {
  // background-color: #fff;
  height: 300px;
  display: flex;
  justify-content: end;
  // padding-left: 2%;
}
</style>